<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<script src='crel.js'></script>
	<script>
	function xhr(url, callback) {
		var xhr = new XMLHttpRequest();
		xhr.open("GET", url, true);
		xhr.onload = function (e) {
		  if (xhr.readyState === 4) {
		    if (xhr.status === 200) {
		      callback(xhr.responseText);
		    } else {
		      callback(null);
		    }
		  }
		};
		xhr.onerror = function (e) {
		  callback(null)
		};
		xhr.send(null);
	}

	var number = "<!--NUMBER-->";

    function show(data) {
        document.getElementById("results").appendChild(createHTMLForJson(data));
    }

	function load() {
        var url = "http://data.haoma.sogou.com/vrapi/query_number.php?number=" + number + "&type=json&callback=show"
		xhr(url, function(response) {
			document.getElementById("loading").style.display = 'none';
			if (response) {
				document.getElementById("results").style.display = 'block';
                eval(response);
			} else {
				document.getElementById("error").style.display = 'block';
			}
		})
	}

	// MARK: rendering

	function createHTMLForJson(json) {
        amount = json.Amount || 0;
        numInfo = json.NumInfo || "";
        info = numInfo.split("：");
        title = "";
        if (info.length > 1) {
            if (amount > 0) {
                title = info[1] + "（" + info[0] + "，" + amount + " 位用户举报）";
            } else {
                title = info[1] + "（" + info[0] + "）";
            }
        } else {
            title = numInfo;
        }
		return crel("div",
            crel("h1", {"class": "number"}, number),
            crel("h3", title)
        );
	}

	load();
	</script>
	<style>
    * {
        padding: 0;
        margin: 0;
    }
	html, body, body > div {
		margin: 0;
		width: 100%;
		height: 100%;
		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "HiraginoSansGB-W3", "Hiragino Sans GB W3";
		line-height: 1.2;
	}
    h1, h2, h3, h4, h5 {
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "HiraginoSansGB-W6", "Hiragino Sans GB W6";
    }
	#loading, #error {
		text-align: center;
	}
	#error, #results {
		display: none;
	}
    #results {
        text-align: left;
    }
    h1 {
        font-size: 32px;
        border-bottom: #ddd 1px solid;
        padding: 0px 0px 10px 0px;
        margin: 0px 0px 10px 0px;
        color: #444;
    }
    h3 {
        font-size: 15px;
        color: #888;
    }
    div.content {
        padding: 15px;
    }
	</style>
</head>
<body>
    <div>
        <div class="content">
            <div id='loading'>
                Loading...
            </div>
            <div id='results'>
            </div>
            <div id='error'>
                Oops, failed to load result.
            </div>
            </div>
        </div>
	</div>
</body>
</html>
